<template>
	<view class="com" v-if="order.total_amount">
		<view class="ct">
			支付信息
		</view>

		<view class="od-cell od-name jcb mt30">
			<view class="od-l">
				商品总额
			</view>
			<view class="od-r">
				{{ order.total_amount || 0 }}
			</view>
		</view>
		<view class="od-cell jcb">
			<view class="od-l">
				折扣优惠
			</view>
			<view class="od-r mprice">
				- {{ order.total_discount_amount || 0 }}
			</view>
		</view>
		<view class="od-cell jcb">
			<view class="od-l">
				邮费
			</view>
			<view class="od-r">
				+ {{ order.transport_amount }}
			</view>
		</view>
		<view class="od-cell jcb" @click="is_coupon = true">
			<view class="od-l">
				优惠券
			</view>
			<view class="od-r ">
				<text class="copƒ" v-if="parseFloat(order.coupon_amount) == 0">
					{{ order.coupon_list && order.coupon_list.length > 0 ? `可用券${order.coupon_list.length}张` : '暂无可用券' }}
				</text>
				<text class="copƒ mprice" v-else>
					- {{ order.coupon_amount || 0 }}
				</text>
				<text class="cuIcon cuIcon-right"></text>
			</view>
		</view>


		<mx-popup v-model="is_coupon">
			<view class="main-pop">
				<view class="main-title">
					选择优惠券
					<view class="close" @click="is_coupon = false">
						<text class="cuIcon cuIcon-close"></text>
					</view>
				</view>
				<scroll-view class="cp-body" scroll-y>
					<view class="cp-content">
						<confirm-coupon :curr_code="coupon_code" :coupon="item"
							v-for="(item, index) in order.coupon_list" :key="index"
							@onActive="getCouponItem"></confirm-coupon>
						<view class="empty" v-if="order.coupon_list && order.coupon_list.length == 0">
							<mx-empty txt="暂无优惠券"></mx-empty>
						</view>
					</view>
				</scroll-view>
			</view>
		</mx-popup>
	</view>
</template>

<script setup>
import confirmCoupon from './confirm-coupon'
const emit = defineEmits(['selectCoupon'])
const props = defineProps({
	order: {
		type: Object,
		default: {}
	}
})
const {
	order
} = toRefs(props)

const is_coupon = ref(false)
const coupon_code = ref('')

const pay = ref(0)
function getCouponItem(coupon) {
	coupon_code.value = coupon.code
	emit('selectCoupon', {
		code: coupon.code
	})
	is_coupon.value = false
}
</script>

<style lang="scss" scoped>
.com {
	width: 100%;
	height: auto;
	margin-bottom: 24rpx;
	background-color: #fff;
	border-radius: 12rpx;
	padding: 24rpx 24rpx 32rpx;

	.ct {
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		padding-bottom: 24rpx;
	}


	.od-cell {
		width: 100%;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		padding-left: 24rpx;

		.od-l {
			font-size: 26rpx;
			min-width: 120rpx;
			color: #000;
		}

		&:last-child {
			margin-bottom: 0;
		}

	}

	.mt30 {
		margin-top: 10rpx;
	}

	.jcb {
		justify-content: space-between;
	}
}

</style>
